<template>
  <div>
    <!-- 放置一个弹层 用来编辑新增节点
        visible控制弹层是否显示关键属性
        内部会监听原生蒙层点击事件/x点击事件/取消的点击事件-el-dialog内部，监听点击事件
    -->
    <el-dialog :title=" isEdit? '编辑权限点' : '新增权限点'" :visible="showDialog" @close="btnCancel">
      <!-- 表单 -->
      <el-form ref="perForm" :model="formData" :rules="rules" label-width="120px">
        <el-form-item label="权限名称" prop="name">
          <el-input v-model="formData.name" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限标识" prop="code">
          <el-input v-model="formData.code" style="width:90%" />
        </el-form-item>
        <el-form-item label="权限描述">
          <el-input v-model="formData.description" style="width:90%" />
        </el-form-item>
        <el-form-item label="开启">
          <!-- 开启了 formData.enVisible就为1 没开启0-->
          <el-switch
            v-model="formData.enVisible"
            active-value="1"
            inactive-value="0"
          />
        </el-form-item>
      </el-form>
      <el-row slot="footer" type="flex" justify="center">
        <el-col :span="6">
          <el-button size="small" type="primary" @click="confirmFn">确定</el-button>
          <el-button size="small" @click="btnCancel">取消</el-button>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script>
export default {
  props: {
    // 是否显示弹层
    showDialog: {
      type: Boolean
    },
    // 添加权限-类型
    type: {
      type: [String, Number],
      default: 0
    },
    // 添加权限-pid(目标)
    thePid: {
      type: [String, Number],
      default: 0
    },
    // 编辑状态
    isEdit: {
      type: Boolean,
      default: false
    },
    // 编辑时，父组件传权限详细信息进来 赋值给formData回显到页面
    formDataObj: {
      type: Object,
      default: _ => {}
    }

  },
  data() {
    // 目标：修改表单bug
  // 1.  同级不能出现同名的 权限名称 (和同级比较) - 不包含自己
  // 2.  项目中的 权限标识 是唯一的 (和整个数组比较) - 只要踢掉自己

    // name验证
    const validateName = (rule, value, callback) => {
      // 添加状态 收集到同门下的所有名字
      let nameArr = this.permissionList.filter(obj => obj.pid === this.thePid).map(item => item.name)
      if (this.isEdit) {
        // 1、编辑状态时传进来的thePid是当前点击的那个权限的id，通过thePid找到当前点击的这个权限对象，拿到他的pid值，进而找到所有同级别的权限，再拿到name
        const obj = this.permissionList.find(obj => obj.id === this.thePid)
        // 2. 取出它的pid
        const pid = obj.pid
        // 3. 整个列表里找到跟他同一个部门的那些人
        nameArr = this.permissionList.filter(obj => obj.pid === pid && obj.id !== this.thePid).map(item => item.name)
      }
      nameArr.includes(value) ? callback(new Error(`此权限名字'${value}',已经存在, 换一个吧`)) : callback()
    }

    // Code验证
    const validateCode = (rule, value, callback) => {
      let codeArr = this.permissionList.map(obj => obj.code)
      // 如果在编辑状态，要将编辑的这一项的code排除
      if (this.isEdit) {
        codeArr = this.permissionList.filter(obj => obj.id !== this.thePid).map(item => item.code)
      }
      // 如果存在该对象，则说明编码已经存在，抛出错误
      codeArr.includes(value) ? callback(new Error(`此权限标识'${value}',已经存在`)) : callback()
    }
    return {
      permissionList: [], // 扁平化权限列表数据
      formData: {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型吖
      },
      rules: {
        name: [{ required: true, message: '权限名称不能为空', trigger: 'blur' }, { validator: validateName, trigger: 'blur' }],
        code: [{ required: true, message: '权限标识不能为空', trigger: 'blur' }, { validator: validateCode, trigger: 'blur' }]
      }
    }
  },
  watch: {
    showDialog() {
      // 将type和pid存到formData中
      // 判断一下，只有在点击新增的时候，才更换type 和pid的值 编辑的时候不改变
      if (!this.isEdit) {
        // 此时为新增
        this.formData.type = this.type
        this.formData.pid = this.thePid
      }
    },
    formDataObj() {
      this.formData = this.formDataObj
    }
  },
  methods: {
    // 关闭弹窗 父组件使用.sync, 子组件使用下面的方法给showDialog传值,形成一个闭环
    // 或者用触发一个close事件，让父组件改值
    btnCancel() {
      this.$emit('update:showDialog', false)
      // 关闭弹窗 清空表单
      this.formData = {
        name: '', // 名称
        code: '', // 权限标识
        description: '', // 描述
        enVisible: '0', // 开启
        pid: '', // 添加到哪个节点下
        type: '' // 类型吖
      }
      // 重置表单
      this.$refs.perForm.resetFields()
    //   console.log('触发了')
    },

    // 确定点击事件：目的：新增一个权限点数据
    confirmFn() {
      // 兜底验证
      // console.log(this.permissionList)
      // console.log(this.targetId)
      this.$refs.perForm.validate(valid => {
        if (!valid) return
        this.$emit('confirm', this.formData)
      })
    }
  }
}
</script>

<style>

</style>
